<template>
  <div class="cart">
    <common-tips></common-tips>
    <div class="cart-list">
      <ul class="list">
        <van-checkbox-group v-model="checked" ref="checkboxGroup">
          <li class="item" v-for="item in cartList" :key="item.id">
            <van-swipe-cell
              :before-close="beforeClose"
              :name="item.id"
              :stop-propagation="true"
            >
              <div class="cell-left">
                <van-checkbox
                  checked-color="#ee0a24"
                  :name="item.goods_id"
                ></van-checkbox>
                <div class="img-holder">
                  <img :src="item.list_pic_url" alt="" />
                </div>
                <div class="text-holder">
                  <p class="name">{{ item.goods_name }}</p>
                  <p class="price">￥{{ item.retail_price }}</p>
                </div>
                <div class="count-holder">
                  <p>x{{ item.number }}</p>
                </div>
              </div>
              <template #right>
                <van-button
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                />
              </template>
            </van-swipe-cell>
          </li>
        </van-checkbox-group>
      </ul>
    </div>

    <div class="fixed-bottom">
      <div class="left-box">
        <van-checkbox
          :value="isCheckedAll"
          @click="checkAll"
          checked-color="#ee0a24"
          >全选</van-checkbox
        >
      </div>
      <div class="right-box">
        <p class="buy-price">￥{{ sumPrice }}</p>
        <p class="buy-btn" @click="toOrder">下单</p>
      </div>
    </div>

    <nav-tabber :active="3"></nav-tabber>
  </div>
</template>

<script>
import { deleteCart, getCartList, addGoodsToCart } from "@/api/cart/cart";
import { submitOrder } from "@/api/pages/order";
import CommonTips from "@/components/common/common-tips";
import NavTabber from "@/components/common/nav-tabber";
export default {
  data() {
    return {
      checked: [],
      cartList: [],
    };
  },
  methods: {
    // 获取购物车列表
    getData() {
      let openId = localStorage.getItem("openId");
      getCartList({ openId: openId }).then((res) => {
        console.log(res);
        this.cartList = res.data;
      });
    },

    // 删除商品
    beforeClose({ name, position, instance }) {
      switch (position) {
        case "left":
        case "cell":
        case "outside":
          instance.close();
          break;
        case "right":
          this.$dialog
            .confirm({
              message: "确定删除吗？",
            })
            .then(() => {
              deleteCart({ id: name }).then((res) => {
                if (res.data) {
                  this.$toast.success("删除成功");
                  this.getData();
                } else {
                  this.$toast.fail("删除失败");
                }
              });
            })
            .catch(() => {
              this.$toast("取消删除");
            });
          break;
      }
      console.log(name);
    },

    // 全选
    checkAll() {
      this.isCheckedAll
        ? this.$refs.checkboxGroup.toggleAll(false)
        : this.$refs.checkboxGroup.toggleAll(true);
    },

    // 获取选中的商品数组
    getCheckedList() {
      let newArr = [];
      let cartArr = this.cartList;
      let checkArr = this.checked;

      checkArr.map((val) => {
        cartArr.map((val2) => {
          if (val == val2.goods_id) {
            newArr.push(val2);
          }
        });
      });

      return newArr;
    },

    // 跳转到结算页面
    toOrder() {
      if (this.checked.length > 0) {
        let goodsId = this.checked.join();
        let openId = localStorage.getItem("openId");
        submitOrder({ allPrise: this.sumPrice, goodsId, openId }).then(
          (res) => {
            if (res.data) {
              this.$toast.success("下单成功");
              this.$router.push("/pages/order");
            }
          }
        );
      } else {
        this.$toast("购物车不能为空");
      }
    },
  },
  computed: {
    sumPrice() {
      return this.getCheckedList().reduce((prev, val) => {
        return prev + val.retail_price * val.number;
      }, 0);
    },
    isCheckedAll() {
      if (this.checked.length >= this.cartList.length) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    this.getData();
  },
  components: {
    "nav-tabber": NavTabber,
    "common-tips": CommonTips,
  },
};
</script>

<style lang="scss">
.cart {
  .cart-list {
    .list {
      background-color: #fff;
      padding: 0 10px;
      .item {
        margin-top: 10px;
        .cell-left {
          display: flex;
          align-items: center;
          height: 100px;
          padding: 10px;
          border-right: 1px solid #b4282d;
          border-bottom: 0.01333rem solid #f4f4f4;
          background-color: #fff;
          .van-checkbox {
            float: left;
          }
          .img-holder {
            margin-left: 10px;
            background-color: #f4f4f4;
            img {
              height: 62px;
              width: 62px;
            }
          }
          .text-holder {
            height: 76px;
            width: 220px;
            p {
              margin: 16px 8px;
            }
          }
        }
        .delete-button {
          height: 100%;
        }
      }
    }
  }

  .fixed-bottom {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 49px;
    left: 0;
    padding-left: 10px;
    height: 50px;
    width: 100%;
    background-color: #fff;
    .right-box {
      display: flex;
      align-self: center;
      width: 138px;
      height: 100%;
      text-align: center;
      line-height: 50px;
      .buy-price {
        margin-right: 20px;
        width: 50px;
        color: #b4282d;
      }
      .buy-btn {
        height: 100%;
        color: #fff;
        background-color: #b4282d;
        width: 100px;
      }
    }
  }
}
</style>